<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>
        <div class="body" style="width: 70%;float:right;margin-top:100px;margin-right:105px; overflow: auto;">
            <div class="return">
                <a class="link" @click="goBack">返回</a>
            </div>
            <div class="steps">
                <ul class="steps" style="width: 500px;margin-left:220px">
                    <li :class="{ 'step': true, 'step-primary': info.status >= 1 }">下单</li>
                    <li :class="{ 'step': true, 'step-primary': info.status >= 2 }">发货</li>
                    <li :class="{ 'step': true, 'step-primary': info.status >= 3 }">待收货</li>
                    <li :class="{ 'step': true, 'step-primary': info.status >= 4 }">已收货</li>
                    <li :class="{ 'step': true, 'step-primary': info.status >= 5 }">完成</li>
                </ul>
            </div>

            <!-- 下面是内容 -->
            <div class="content" style="border: 1px solid #000;margin-top:40px;height:560px; border-radius: 4px;">
                <!-- 使用daisyui写一个订单详情页 -->
                <h4 class="text-xl font-semibold" style="margin-left: 40px;margin-top:20px;">基础信息</h4>
                <div class="flex justify-center" style="width: 90%;margin:0 auto;margin-top:10px">
                    <table class="table w-full" style="border-bottom:1px solid #F2F2F2;border-radius:10px">
                        <!-- head -->
                        <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>商家账号</th>
                                <th>用户账号</th>
                                <th>总金额</th>
                                <th>物流单号</th>
                                <th>配送方式</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row 1 -->
                            <tr>
                                <th>{{ info.id }}</th>
                                <td>{{ info.supplier }}</td>
                                <td>{{ info.user }}</td>
                                <td>{{ info.amount }}</td>
                                <td>{{ info.logistics_id }}</td>
                                <td>{{ info.logistics }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h4 class="text-xl font-semibold" style="margin-left: 40px;margin-top:20px;">收货人信息</h4>
                <div class="overflow-y-auto flex justify-center" style="width: 90%;margin:0 auto;margin-top:10px">
                    <table class="table w-full" style="border-bottom:1px solid #F2F2F2;border-radius:10px">
                        <!-- head -->
                        <thead>
                            <tr>
                                <th>收货人姓名</th>
                                <th>收货人号码</th>
                                <th>收货人地址</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row 1 -->
                            <tr>
                                <th>{{ info.receiptInfo.name }}</th>
                                <td>{{ info.receiptInfo.phoneNumber }}</td>
                                <td>{{ info.receiptInfo.address }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h4 class="text-xl font-semibold" style="margin-left: 40px;margin-top:20px;">商品信息</h4>
                <div class="overflow-y-auto flex justify-center" style="width: 90%;margin:0 auto;margin-top:10px">
                    <table class="table w-full" style="border-bottom:1px solid #F2F2F2;border-radius:10px">
                        <!-- head -->
                        <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>商品价格</th>
                                <th>商品数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- row 1 -->
                            <tr v-for="item in info.goodsInfo" :key="item.id">
                                <th>
                                    <div class="avatar">
                                        <div class="mask mask-squircle w-12 h-12">
                                            <img :src="item.pic" alt="Avatar Tailwind CSS Component" />
                                        </div>
                                    </div>
                                </th>
                                <td>{{ item.name }}</td>
                                <td>{{ item.price }}</td>
                                <td>{{ item.stock }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</template>
<!-- 订单状态
0 代表已下单
1 代表商品已发货
2 代表待确认收货
3 代表商品已收货
4 代表订单完成
5 代表订单取消 -->
<script>
import MyHead from "../../components/head.vue"
import MyNav from "../../components/nav.vue"
export default {
    name: "order_details",
    data() {
        return {
            info: {}
        }
    },
    mounted() {
        this.getOrderDetails();
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        //从路由中获取订单ID获取订单详情
        getOrderDetails() {
            this.$http.post("/admin/getOrderDetailByID", {
                "orderId": this.$route.params.id,
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                }
            }).then(res => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.info = res.data.data;
            }).catch(err => {
                console.log(err);
            })
        },
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
}
</script>

<style scoped></style>